import { ExtractPropTypes } from 'vue'
import { ImageMode, ImageModes, TuniaoSize, TuniaoSizes, TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue, number as validatorNumber } from '../../utils'

/**
 * props参数
 */
export const iconProps = {
  /** 图标名称，可以传入图片地址(支持jpg、jpeg、png, gif) */
  icon: {
    type: String,
    required: true
  },
  /** 图标颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 图标颜色，支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 图标大小，如果是图片类型的图片则定义宽高(内置sm、lg、xl) */
  size: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value) || TuniaoSizes.includes(value as TuniaoSize)
    }
  },
  /** 是否加粗图标 */
  bold: {
    type: Boolean,
    default: false
  },
  /** 图片模式mode，当图片为图片时生效 */
  imgMode: {
    type: String,
    default: 'scaleToFill',
    validator: (value: ImageMode) => {
      return ImageModes.includes(value)
    }
  },
  /** 垂直方向的偏移量，单位rpx */
  top: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      if (typeof value === 'number') {
        return validatorNumber(String(value))
      }
      return validatorNumber(value)
    }
  }
}
export type IconProps = ExtractPropTypes<typeof iconProps>
